<template>
  <div class="cart-item">
    <van-swipe-cell>
      <div class="good">
        <van-checkbox v-model="item.selected"></van-checkbox>
        <van-card
          class="goods-card"
          :thumb="item.s_good.s_goods_photos[0].path"
        />
        <div class="desc">
          <p>{{ item.s_good.name }}</p>
          <p>¥ {{ item.s_good.price }}</p>
        </div>
        <div class="option">
          <van-stepper
            v-model="item.num"
            :name="item.id"
            @plus="add(item.id)"
            @minus="sub(item.id)"
          />
        </div>
      </div>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="cartStore.delCart(item.id)"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script setup>
import { toRefs } from 'vue';
import useCartStore from '@/stores/cart';
const props = defineProps(['item']);
const { item } = toRefs(props);
const cartStore = useCartStore();
const { add, sub } = cartStore;
</script>

<style lang="scss" scoped>
.cart-item {
  margin: 5px 0px;
  background-color: #f7f8fa;
}
.good {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
}
.delete-button {
  height: 100%;
}
</style>
